// 入口文件
//导入react包
import React from 'react'
//导入渲染包 react-dom
import ReactDOM from 'react-dom/client'

const str = 'hello react'

const fn = () => {
  return 'hahahha'
}

const obj = {
  name: 'zs',
  age: 23,
}

const span = <span>我是创建的子节点</span>
// 1. 创建react元素
// jsx中如何使用数据 插入表达式(有值的)  {表达式}
// 有js关键字 就不是表达式, 没有值的概念 let a = 1
const el = (
  <>
    <p className={str}>{str}</p>
    <p className={str}>{fn()}</p>
    <p className={str}>{obj.age}</p>
    <p className={str}>{span}</p>
    <p className={str}>{1 + 2}</p>
    <p className={str}>{'直接在括号里面写值'}</p>
    <p className={str}>{1 > 2 ? '我是最大的' : '我是最小的'}</p>

    <span className="react">hello react!!!</span>
  </>
)

// 2. 创建挂载点
const root = ReactDOM.createRoot(document.getElementById('root'))

// 3. 元素需要渲染在挂载点中
root.render(el)
